import { useEffect, useMemo, useRef, useState } from 'react'
import clsx from 'clsx'
import {
  useInView,
} from 'framer-motion'

import { Container } from '../Container'

const reviews = [
  {
    "title": "选择最佳志愿的神器。",
    "body": "在下载这个志愿辅助填报系统之前，我完全不知道如何选择学校和专业。现在，我对我的选择充满信心。",
    "author": "高考生小张",
    "rating": 5,
  },
  {
    "title": "不再害怕填志愿。",
    "body": "我一直对填报志愿感到害怕，怕选择错误的学校或专业。这个系统为我提供了清晰的指导和建议，使我充满信心。",
    "author": "即将升大学的小李",
    "rating": 5,
  },
  {
    "title": "比家长还靠谱。",
    "body": "家里人给了我很多意见，但都是基于他们的经验。这个系统给了我基于数据的专业建议，帮助我做出了明智的选择。",
    "author": "独立思考的小王",
    "rating": 5,
  },
  {
    "title": "为什么我之前没有发现它？",
    "body": "如果我早点知道这个系统，我就不用浪费那么多时间在志愿选择上了。它为我节省了大量时间和精力。",
    "author": "高三复读的小赵",
    "rating": 5,
  },
  {
    "title": "真正的生涯规划师。",
    "body": "不仅仅是帮助我选择学校和专业，这个系统还帮助我规划了未来的职业道路。真的很感谢！",
    "author": "对未来充满期待的小刘",
    "rating": 5,
  },
  {
    "title": "我推荐给了所有的同学。",
    "body": "我觉得所有人都应该使用这个系统。我已经推荐给了我所有的同学，希望他们也能从中受益。",
    "author": "乐于助人的小陈",
    "rating": 5,
  },
  {
    "title": "填志愿再也不迷茫。",
    "body": "每次面对那么多的学校和专业，我都感到非常迷茫。但是这个系统为我指明了方向，我现在明确知道我想去哪里，学什么。",
    "author": "焦虑高考生小吴",
    "rating": 5,
  },
  {
    "title": "不仅仅是一个工具。",
    "body": "这不仅仅是一个填报工具，更像是一个指导我人生道路的导师。它考虑了我的兴趣、成绩和未来发展，帮我做出了最好的决策。",
    "author": "感激的小韩",
    "rating": 5,
  },
  {
    "title": "值得每一分钱。",
    "body": "我为这个系统付费，并且觉得每一分钱都花得值。它可能改变了我的人生轨迹，帮我选择了最适合我的学校和专业。",
    "author": "投资未来的小杨",
    "rating": 5,
  },
  {
    "title": "为什么学校不早点推荐？",
    "body": "如果学校早点推荐这个系统给我们，那么我们在高考前的准备会更充分。真心希望每一位高考生都能使用这个系统。",
    "author": "高三班主任小宋",
    "rating": 5,
  },
  {
    "title": "家长的好帮手。",
    "body": "作为一个家长，我对高考和填志愿知之甚少。这个系统帮我理解了整个流程，也帮我孩子选择了最佳的学校和专业。",
    "author": "担心孩子未来的王妈妈",
    "rating": 5,
  },
  {
    "title": "再也不用听亲戚的各种建议。",
    "body": "每次家里聚会，各种亲戚都会给我提建议。现在，我有了这个系统，我知道如何为自己做选择，不再受他们的影响。",
    "author": "独立的小冯",
    "rating": 5,
  }
]

function StarIcon(props) {
  return (
    <svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
      <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
    </svg>
  )
}

function StarRating({ rating }) {
  return (
    <div className="flex">
      {[...Array(5).keys()].map((index) => (
        <StarIcon
          key={index}
          className={clsx(
            'h-5 w-5',
            rating > index ? 'fill-cyan-500' : 'fill-gray-300'
          )}
        />
      ))}
    </div>
  )
}

function Review({ title, body, author, rating, className, ...props }) {
  let animationDelay = useMemo(() => {
    let possibleAnimationDelays = ['0s', '0.1s', '0.2s', '0.3s', '0.4s', '0.5s']
    return possibleAnimationDelays[
      Math.floor(Math.random() * possibleAnimationDelays.length)
    ]
  }, [])

  return (
    <figure
      className={clsx(
        'animate-fade-in rounded-3xl bg-white p-6 opacity-0 shadow-md shadow-gray-900/5',
        className
      )}
      style={{ animationDelay }}
      {...props}
    >
      <blockquote className="text-gray-900">
        <StarRating rating={rating} />
        <p className="mt-4 text-lg font-semibold leading-6 before:content-['“'] after:content-['”']">
          {title}
        </p>
        <p className="mt-3 text-base leading-7">{body}</p>
      </blockquote>
      <figcaption className="mt-3 text-sm text-gray-600 before:content-['–_']">
        {author}
      </figcaption>
    </figure>
  )
}

function splitArray(array, numParts) {
  let result = []
  for (let i = 0; i < array.length; i++) {
    let index = i % numParts
    if (!result[index]) {
      result[index] = []
    }
    result[index].push(array[i])
  }
  return result
}

function ReviewColumn({
  className,
  reviews,
  reviewClassName = () => { },
  msPerPixel = 0,
}) {
  let columnRef = useRef()
  let [columnHeight, setColumnHeight] = useState(0)
  let duration = `${columnHeight * msPerPixel}ms`

  useEffect(() => {
    let resizeObserver = new window.ResizeObserver(() => {
      setColumnHeight(columnRef.current.offsetHeight)
    })

    resizeObserver.observe(columnRef.current)

    return () => {
      resizeObserver.disconnect()
    }
  }, [])

  return (
    <div
      ref={columnRef}
      className={clsx('animate-marquee space-y-8 py-4', className)}
      style={{ '--marquee-duration': duration }}
    >
      {reviews.concat(reviews).map((review, reviewIndex) => (
        <Review
          key={reviewIndex}
          aria-hidden={reviewIndex >= reviews.length}
          className={reviewClassName(reviewIndex % reviews.length)}
          {...review}
        />
      ))}
    </div>
  )
}

function ReviewGrid() {
  let containerRef = useRef()
  let isInView = useInView(containerRef, { once: true, amount: 0.4 })
  let columns = splitArray(reviews, 3)
  columns = [columns[0], columns[1], splitArray(columns[2], 2)]

  return (
    <div
      ref={containerRef}
      className="relative -mx-4 mt-16 grid h-[49rem] max-h-[150vh] grid-cols-1 items-start gap-8 overflow-hidden px-4 sm:mt-20 md:grid-cols-2 lg:grid-cols-3"
    >
      {isInView && (
        <>
          <ReviewColumn
            reviews={[...columns[0], ...columns[2].flat(), ...columns[1]]}
            reviewClassName={(reviewIndex) =>
              clsx(
                reviewIndex >= columns[0].length + columns[2][0].length &&
                'md:hidden',
                reviewIndex >= columns[0].length && 'lg:hidden'
              )
            }
            msPerPixel={10}
          />
          <ReviewColumn
            reviews={[...columns[1], ...columns[2][1]]}
            className="hidden md:block"
            reviewClassName={(reviewIndex) =>
              reviewIndex >= columns[1].length && 'lg:hidden'
            }
            msPerPixel={15}
          />
          <ReviewColumn
            reviews={columns[2].flat()}
            className="hidden lg:block"
            msPerPixel={10}
          />
        </>
      )}
      <div className="pointer-events-none absolute inset-x-0 top-0 h-32 bg-gradient-to-b from-gray-50" />
      <div className="pointer-events-none absolute inset-x-0 bottom-0 h-32 bg-gradient-to-t from-gray-50" />
    </div>
  )
}

export function Reviews() {
  return (
    <section
      id="reviews"
      aria-labelledby="reviews-title"
      className="pb-16 pt-20 sm:pb-24 sm:pt-32"
    >
      <Container>
        <h2
          id="reviews-title"
          className="text-3xl font-medium tracking-tight text-gray-900 sm:text-center"
        >
          志愿填报，从此不再迷茫
        </h2>
        <p className="mt-2 text-lg text-gray-600 sm:text-center">
          基于数据的专业推荐，让每位高考生与家长的志愿选择之路更明确、自信且科学。
        </p>
        <ReviewGrid />
      </Container>
    </section>
  )
}
